<template>
    <view class="page-mall" :style="{ 'background-color': keys != 'home' ? info.bg_color: '', 'min-height': keys != 'home' ? '100vh': 'auto' }">
        <view class="head" v-if="keys != 'home'">
            <image class="bg-img" v-if="info.bg_img" :src="info.bg_img" mode="widthFix"></image>
		    <mx-navbar :background="`${info.title_bg_color || '#fff'}`" :text_color="`${info.title_color || '#000'}`" :config_info="info" :title="info.title"></mx-navbar>
        </view>
        <view class="pbody">
            <view class="item" :id="`${item.type}_$index}`" v-for="(item, index) in list" :key="index">
                <mx-space v-if="item.type === 'Space'" :info="item"></mx-space>
                <mx-hotimg v-if="item.type === 'HotImage'" :info="item"></mx-hotimg>
                <mx-banner v-if="item.type === 'Banner'" :info="item"></mx-banner>
                <mx-nav v-if="item.type === 'Nav'" :info="item"></mx-nav>
                <mx-fleximg v-if="item.type === 'FlexImg'" :info="item"></mx-fleximg>
                <mx-adt v-if="item.type === 'Alr'" :info="item"></mx-adt>
                <mx-module-goods v-if="item.type === 'ModuleGoods'" :info="item"></mx-module-goods>
                <mx-banner-goods v-if="item.type === 'BannerGoods'" :info="item"></mx-banner-goods>
            </view>
        </view>
    </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const props = defineProps({
    keys: {
        type: String,
        default: ''
    },
    modelValue: { required: true },
    page_data: {
        type: Array,
        default: []
    }
})


const emit = defineEmits(['update:modelValue', 'change']);

const data = reactive({
    info: {},
    list: [],
})

const { info, list } = toRefs(data)


onMounted(() => {
    if (props.page_data && props.page_data.length > 0) {
        data.list = props.page_data
        data.info = data.list[0]
    } else {
        getData()
    }

})

async function getData() {
    let res = await proxy.$api('Page', {
        key: props.keys
    })
    if (res.code == 0) {
        data.list = res.data
        data.info = data.list[0]
    }
}


</script>

<style lang="scss" scoped>
.page-mall {
    position: relative;
    
    .bg-img {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .pbody {
        position: relative;
        z-index: 2;
    }
}
</style>